<template>
  <div>
    <mu-popup position="top" :overlay="false" popupClass="demo-popup-top" :open="popupVisible">
      {{message}}
    </mu-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'


export default {
  name: 'global-popup',
  computed: {
    ...mapState({
      popupVisible: state => state.globalPopup.visible,
      message: state => state.globalPopup.message,
      delay: state => state.globalPopup.delay,
    })
  },

  watch: {
    popupVisible (val) {
      if (val) {
        setTimeout(() => {
          this.$store.commit("CLOSEPOPUP")
        }, this.delay)
      } else {
        return false
      }
    }

  }
}
</script>

<style lang="css">
.demo-popup-top {
  width: 100%;
  opacity: 0.9;
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
    0 1px 4px rgba(0, 0, 0, 0.117647);
  height: 32px;
  line-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 240px;
  top: 5px;
}
</style>